// 双十一勋章
import shareButton from '@/resource/share_btn.png'
import { Button, Grid, Image, Mask, Popup } from 'antd-mobile'
import { CloseCircleOutline } from 'antd-mobile-icons'
import { observer, useLocalStore } from 'mobx-react'
import React from 'react'
import styles from './index.module.less'
import Store from './store'
const Medal = props => {
    const store = useLocalStore(() => new Store())
    const { medalInfo } = props
    const medalType = medalInfo?.data.length === 1 ? 'activityPoster' : 'gatherPoster'
    let postMedalInfo = {}
    const medalData = medalInfo?.data?.[0] ?? {}
    if (medalType === 'activityPoster') {
        postMedalInfo = {
            ...medalData,
            qrcode: medalInfo.qrcode,
        }
    } else {
        postMedalInfo = {
            number: medalInfo.num,
            time: medalInfo.time,
            qrCode: medalInfo.qrcode,
        }
    }

    return (
        <Mask visible={store.showMask} opacity={0.8}>
            <div className={styles.medal_container}>
                {medalType === 'activityPoster' ? (
                    <>
                        <div className={styles.single_medal}>
                            <Image src={medalData.icon} className={styles.medal_icon} />
                            <p className={styles.medal_name}>{medalData.name}</p>
                            {medalData.description?.split('，')?.map(item => {
                                return <p key={item}>{item}</p>
                            })}
                            <p className={styles.total_title}>你是第 {medalInfo?.num} 位获得该勋章的人</p>
                        </div>
                    </>
                ) : (
                    <>
                        <Image lazy src="https://static.zpimg.cn/public/career_h5/pic_medal.png" className={styles.three_medal} />
                        <div className={styles.get_medal_num}>你是第 {medalInfo?.num} 位集齐该勋章的人</div>
                    </>
                )}
                {/* <Button className={styles.share_btn} onClick={store.shareMedal} shape="rounded">
          分享
        </Button> */}
                <div className={medalType === 'activityPoster' ? styles.share_btn_text : styles.share_btn}>
                    <img src={shareButton} alt="" onClick={store.shareMedal} />
                    <span>分享</span>
                </div>
                {/* <Image
          lazy
          src="https://static.zpimg.cn/public/career_h5/medal_close_icon.png"
          className={styles.close_icon}
          onClick={store.onMaskClick}
        /> */}
                <div className={styles.close_icon}>
                    <CloseCircleOutline color="#fff" onClick={store.onMaskClick} fontSize={24} />
                </div>
                <Popup
                    visible={store.showPopup}
                    bodyStyle={{
                        height: '4.4rem',
                        borderTopLeftRadius: '0.32rem',
                        borderTopRightRadius: '0.32rem',
                    }}
                    onMaskClick={store.onShowPopup}
                >
                    <div className={styles.share_medal}>
                        <p>分享至</p>
                        <Grid columns={2} gap={8}>
                            <Grid.Item>
                                <div
                                    className={styles.share_pathway}
                                    onClick={() => {
                                        store.postDingShare(medalType, 'kankan', postMedalInfo)
                                    }}
                                >
                                    <Image lazy src="https://static.zpimg.cn/public/career_h5/icon/icon_look.png" width={'0.96rem'} height={'0.96rem'} />
                                    <span>看看动态</span>
                                </div>
                            </Grid.Item>
                            <Grid.Item>
                                <div
                                    className={styles.share_pathway}
                                    onClick={() => {
                                        store.postDingShare(medalType, 'save', postMedalInfo)
                                    }}
                                >
                                    <Image lazy src="https://static.zpimg.cn/public/career_h5/icon/icon_save_local.png" width={'0.96rem'} height={'0.96rem'} />
                                    <span>保存到相册</span>
                                </div>
                            </Grid.Item>
                        </Grid>
                        <div className={styles.cancel_container}>
                            <Button block size="large" shape="rounded" className={styles.cancel_btn} onClick={store.onShowPopup}>
                                取消
                            </Button>
                        </div>
                    </div>
                </Popup>
            </div>
        </Mask>
    )
}
export default observer(Medal)
